<template>
    <div style="width:1000px;margin:0 auto;">

        <el-button type="danger" @click="eventDeleteALL">批量删除</el-button>
        <!--购物车列表-->

        <div style="text-align:left;" v-for="(item, index) in tableData" :key="index">
            <h3>{{ item.storeName }}</h3>
            <el-table ref="multipleTable" :data="item.products" tooltip-effect="dark" style="width: 100%"
                @selection-change="handleSelectionChange">
                <el-table-column type="selection" width="55">
                </el-table-column>
                <el-table-column label="图片" width="120">
                    <template slot-scope="scope">
                       <router-link :to="'/product/detail?id='+scope.row.skuId">
                        <img :src="'http://localhost:5184/' + scope.row.image" style="width:50px;" />
                    </router-link>
                    </template>
                </el-table-column>
                <el-table-column prop="number" label="选中" width="180">
                    <template slot-scope="scope">
                        {{ scope.row.isChecked }}
                    </template>
                </el-table-column>
                <el-table-column prop="name" label="名称"></el-table-column>
                <el-table-column prop="number" label="数量" width="180">
                    <template slot-scope="scope">
                        <el-input-number v-model="scope.row.number" size="mini" @change="handleChange(scope.row)" :min="1"
                            label="描述文字"></el-input-number>
                    </template>
                </el-table-column>
                <el-table-column prop="price" label="单价" width="120">
                    <template slot-scope="scope">
                        <span style="color:red;">￥{{ scope.row.price.toFixed(2) }}</span>
                    </template>
                </el-table-column>
                <el-table-column prop="name" label="小计" width="120">
                    <template slot-scope="scope">
                        <span style="color:red;">￥{{ (scope.row.price * scope.row.number).toFixed(2) }}</span>
                    </template>
                </el-table-column>
                <el-table-column prop="address" label="操作" width="120">
                    <template slot-scope="scope">
                        <el-button type="danger" size="mini" @click="eventDelete(scope.row)">删除</el-button>
                    </template>
                </el-table-column>

            </el-table>
        </div>



        <div style="text-align:right;">
            共选择了{{ selectedCount }}个商品，总金额<span style="color:red;font-weight:600;">￥{{ selectedAmount }}</span>
            <div>
                <el-button type="danger" @click="eventSettle">立即结算</el-button>
            </div>
        </div>
    </div>
</template>


<script>
export default {
    data() {
        return {
            tableData: [],
            multipleSelection: []
        }
    },

    mounted() {
        this.loadCarData()
    },

    methods: {
        //结算按钮事件
        eventSettle(){
            //1、获取选中的商品
            if(this.multipleSelection.length<=0){
                this.$message.error('请至少选择一项才可以进行结算')
                return
            }
            //2、跳转到结算页面（跳转的同时，需要把选中的商品传过去）
            /**
             * 1）用缓存
             * 2）直接路由传
             *      2.1）路由path
             *      2.2）路由name
             */
            this.$router.push(  {name:'car/settle',params:{d:this.multipleSelection}} )
        },

        //批量删除购物车数据
        eventDeleteALL() {
            if(this.multipleSelection.length<=0){
                this.$message.error('请至少选择一项')
                return
            }

            if (confirm('确认删除吗？')) {

                let url = 'http://localhost:5184/car?memberId=3fa85f64-5717-4562-b3fc-2c963f66afa6'
                let data = []

                this.multipleSelection.forEach(x=>{
                    data.push( x.skuId)
                })

                this.$http.delete(url, { data: data }).then(res => {
                    console.log(res);
                    this.$message.info('删除成功')
                    //删除成功，刷新页面
                    this.loadCarData()
                })
            }
        },

        //行删除购物车数据
        eventDelete(row) {
            let url = 'http://localhost:5184/car?memberId=' + row.memberId
            let d = [
                row.skuId
            ]
            this.$http.delete(url, { data: d }).then(res => {
                console.log(res);
                this.loadCarData() //删除成功，刷新页面
            })
        },

        //购物车数据改变事件
        handleChange(row) {

            if (row.number <= 0) {
                this.$message.error('最少选择一个')
                return
            }

            if (row.number > 10) {
                this.$message.error('不能超过库存数量')
                return
            }

            let url = 'http://localhost:5184/car'
            this.$http.put(url, row).then(res => {
                console.log(res);
            })
        },
        //加载购物车数据
        loadCarData() {
            let url = 'http://localhost:5184/car?memberId=3fa85f64-5717-4562-b3fc-2c963f66afa6'
            this.$http.get(url).then(response => {
                //console.log(response);
                this.tableData = response.data.data
            })
        },
        //表格选中改变事件
        handleSelectionChange(val) {

            //知道单击的是哪个店铺
            let storeName = val[0].storeName

            let a = this.tableData.filter(x => x.storeName == storeName)
            console.log(a);
            //先把这个店铺的所有选中清空
            a[0].products.forEach(x => {
                x.isChecked = false
            })
            //把点击这些商品选中
            val.forEach(x => {
                x.isChecked = true
            })


            let c = []
            this.tableData.forEach(x => {
                x.products.forEach(p => {
                    if (p.isChecked) {
                        c.push(p)
                    }
                })
            })

            this.multipleSelection = c;
        }
    },
    //计算属性
    computed: {
        //选中的个数
        selectedCount() {
            return this.multipleSelection.length
        },
        //选中的总金额
        selectedAmount() {
            let s = 0
            this.multipleSelection.forEach(x => {
                s += (x.price * x.number)
            })
            return s.toFixed(2)
        }
    }
}
</script>